<template>
	<view class="buk-room-type-card">
		<view class="flex flex-direction w-full">
			<view class="buk-room-type-card__title">{{ data.roomTypeName }}</view>
			<view class="buk-room-type-card__tag">
				<view class="buk-room-type-card__tag__item" v-for="(item, index) in data.tags" v-if="data.tags"
					:key="index">{{ item }}</view>
			</view>
			<view class="container-grid" v-for="(item, index) in data.ratePlans" :key="index">
				<view class="justify-center">
					<text class="font24">{{ item.roomName }}</text>
				</view>
				<view class="justify-center">
					<text class="font24 uni-warning" v-if="!item.cancelPolicies[0].canCancel">不可取消</text>
				</view>
				<view class="justify-center">
					<text class="font24 uni-warning" v-if="item.rates[0].mealCount == 0">无早</text>
				</view>
				<view class="justify-center">
					<text class="font24">共计：</text>
					<text class="text-price font-bold font40 uni-warning">{{ item.lowestPrice * days }}</text>
				</view>
				<view>
					<button type="primary" size="mini"
						@click.stop="_createOrder(hotelId, data.roomTypeId, item.roomId, item.inclusiveAmount, item)">预订</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		useHotelStore
	} from '@/store/hotel.js'

	const props = defineProps({
		data: {},
		days: {
			type: Number,
			default: 1
		},
		hotelId: {
			type: Number,
			default: 0
		}
	});

	const hotelStore = useHotelStore()


	function _createOrder(hotelId, roomTypeId, roomId, price, ratePlan) {
		try {
			let orderInfo = {
				hotelId,
				roomTypeId,
				roomId,
				price,
				'checkInDate': hotelStore.checkInDate,
				'checkOutDate': hotelStore.checkOutDate,
				'roomCount': hotelStore.roomCount
			}

			console.log(orderInfo)

			hotelStore.updateOrderInfo(orderInfo)
			hotelStore.updateRatePlan(ratePlan)

			uni.navigateTo({
				url: '/pages/hotel/OrderGenerate'
			});
		} catch (err) {
			console.log(err)
		}
	}
	
</script>

<style lang="scss" scoped>
	.container-grid {
		display: grid;
		// height: 150rpx;
		grid-template-columns: 3fr 1fr 1fr 3fr 2fr;
	}

	.buk-room-type-card {
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 24rpx;
		padding: 6rpx;
		display: flex;
		position: relative;

		&--disable {
			opacity: 0.7;
		}

		&__original {
			position: absolute;
			width: 124rpx;
			height: 40rpx;
			top: 0;
			left: 0;
			border-radius: 20rpx 20rpx 20rpx 0px;
			background: linear-gradient(90deg, #ff3700 0%, #ff7300 100%);
			display: flex;
			align-items: center;
			justify-content: center;

			& text {
				font-size: 22rpx;
				color: #ffffff;
			}
		}

		&__image {
			width: 220rpx;
			overflow: hidden;
			display: flex;
			border-radius: 10rpx;
			background-color: #f8f8f8;
			margin-right: 24rpx;

			& image {
				width: 100%;
				height: 100%;
			}

			&--mt16 {
				margin-top: 16rpx;
			}
		}

		&__title {
			font-size: 40rpx;
			font-weight: 500;
			color: $ax-text-color-black;
			line-height: 45rpx;
		}

		&__tag {
			display: flex;
			flex-wrap: wrap;

			&__item {
				font-size: 24rpx;
				line-height: 34rpx;
				color: #242424;

				&:not(:last-child) {
					margin-right: 8rpx;
				}
			}
		}
	}

	.pay-btn {
		background: #241f21;
		padding: 4rpx;
		color: #ffffff;
		font-size: 28rpx;
		min-width: 120rpx;
		text-align: center;

		&__bottom {
			background-color: #ffffff;
			width: 100%;
			color: #242424;
			font-size: 22rpx;
			text-align: center;
		}

		&--hover {
			opacity: 0.8;
		}
	}

	.w386 {
		width: 386rpx;
	}
</style>